import React, { useState } from 'react'
import {BrowserRouter, Route, Routes, Link, Navigate} from 'react-router-dom'
import { CSSTransition,TransitionGroup } from 'react-transition-group'

import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [isShow,setIsShow] = useState(true)

  return (
    <BrowserRouter>
    <div className="App">
      {/* <h1>APP</h1>
      <TransitionGroup 
        className='router-wrapper'
        childFactory={child => React.cloneElement(child, {'forward-from-right-enter'})}
        >
          <CSSTransition timeout={1000} classNames=''> 
            <Routes>
              <Route path='/' element={<Navigate to='/home'/>} />
              <Route path='/about' element={<About />} />
              <Route path='/home' element={<Home />} />
            </Routes>
          </CSSTransition>
        </TransitionGroup>
      

      <nav>
        <h2>
        <Link to='/about'>About</Link>
        </h2>
        <h2>
        <Link to='/Home'>Home</Link>
        </h2>
      </nav> */}


      <CSSTransition in={isShow} classNames='box' timeout={1000} appear={true} >
        <div style={{height:'100px',width:'100px',backgroundColor:'red'}}>box</div>
      </CSSTransition>
      <button onClick={() => setIsShow(!isShow)} >click({String(isShow)})</button>

    </div>
    </BrowserRouter>
  )
}

function About() {

  return (
    <div className='page about' >
      <div >about</div>
    </div>
  )
}

function Home() {

  return (
    <div className='page home' >
      <div>home</div>
    </div>
  )
}

export default App
